<!DOCTYPE html>
<html lang="en">

<head>
  @@include('../../include/head.html',{
  "title":"数据联动"
  })
  <link rel="stylesheet" href="/static/css/main.css">
</head>

<body>
  <div>
    <p>已选择：<span id="result"></span></p>
    <div class="listbox">
      <div id="provice" class="list"></div>
      <div id="city" class="list"></div>
      <div id="area" class="list"></div>
    </div>
  </div>
  <script id="Temp" type="text/html">
    <ul>
      <li class='place'></li>
      <li class='place'></li>
      {{each area v}}
      <li data-code="{{v.code}}" data-name="{{v.name}}" class='item'>{{v.name}}</li>
      {{/each}}
      <li class='place'></li>
      <li class='place'></li>
    </ul>
    <div class="shadow upshadow"></div>
    <div class="line"></div>
    <div class="shadow downshadow"></div>
    </script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="@@webRoot/static/plugin/template-web.js"></script>
  <script>
    /**
      未完成
        */

    let sy = 0;
    let my = 0;
    let ey = 0;

    function provice() {
      $.ajax({
        url: 'http://dingba.ketao.com/api/area/list',
        dataType: 'json',
        data: {
          level: 1
        }
      }).done(function (cb) {
        $('#provice').html(template('Temp', cb.data)).find('ul').trigger('touchstart').trigger('touchmove').trigger(
          'touchend');
      })
    }

    function city(code) {
      $.ajax({
        url: 'http://dingba.ketao.com/api/area/list',
        dataType: 'json',
        data: {
          level: 2,
          parentcode: code
        }
      }).done(function (cb) {
        $('#city').html(template('Temp', cb.data)).find('ul').trigger('touchstart').trigger('touchmove').trigger(
          'touchend');
      })
    }

    function area(code) {
      $.ajax({
        url: 'http://dingba.ketao.com/api/area/list',
        dataType: 'json',
        data: {
          level: 3,
          parentcode: code
        }
      }).done(function (cb) {
        $('#area').html(template('Temp', cb.data)).find('ul').trigger('touchstart').trigger('touchmove').trigger(
          'touchend')
      })
    }
    provice();

    function show() {
      let rt = $('.list').toArray().map((ele, inx) => {
        return $(ele).find('ul li.active').data();
      })
      console.log(rt);

      $('#result').text(rt);
    }
    $('.list').on('touchstart', 'ul', function (e) {
      sy = e.targetTouches ? e.targetTouches[0].pageY : 0;
      ey = $(this).data().ey ? $(this).data().ey : 0;
    })
    $('.list').on('touchmove', 'ul', function (e) {
      my = e.targetTouches ? e.targetTouches[0].pageY : 0;
      $(this).css('transform', 'translate3d(0px,' + (my - sy + ey) + 'px,0px)');
    })
    $('.list').on('touchend', 'ul', function (e) {
      ey += my - sy;
      if (ey > 0) {
        ey = 0;
      } else if (ey < 200 - $(this).height()) {
        ey = 200 - $(this).height();
      } else {
        ey = -Math.round(Math.abs(ey) / 40) * 40;
      }
      let nth = Math.round(Math.abs(ey) / 40);
      let code = $(this).children('li').eq(nth + 2).data().code;
      $(this).css('transform', 'translate3d(0px,' + ey + 'px,0px)').data('ey', ey).children('li').eq(nth + 2).addClass(
        'active').siblings(
        'li').removeClass('active');
      if ($(this).parents('#provice').length) {
        city(code);
      } else if ($(this).parents('#city').length) {
        area(code);
      } else {
        show();
      }
    });
  </script>
</body>

</html>